<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<link rel="stylesheet" href="css/jquery.my-message.1.1.css" />
	</head>

	<body>
		<button id="btn1">普通的</button>
		<button id="btn2">成功的</button>
		<button id="btn3">警告的</button>
		<button id="btn4">错误的</button>
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script type="text/javascript" src="js/jquery.my-message.1.1.js"></script>
		<script>
			var message = new MyMessage.message({
				/*默认参数，下面为默认项*/
				iconFontSize: "32px", //图标大小,默认为20px
				messageFontSize: "24px", //信息字体大小,默认为12px
				showTime: 5000, //消失时间,默认为3000
				align: "center", //显示的位置类型center,right,left
				positions: { //放置信息距离周边的距离,默认为10px
					top: "20px",
					bottom: "10px",
					right: "10px",
					left: "10px"
				},
			});

			$('#btn1').click(function() {
				message.add("普通的消息");
			});
			$('#btn2').click(function() {
				message.add("保存成功", "success");
			});
			$('#btn3').click(function() {
				message.add("警告的消息", "warning");
			});
			$('#btn4').click(function() {
				message.add("错误的消息", "error");
			});
		</script>
	</body>

</html>